<template>
  <div>
    <div class="house-main">
      <van-search
  v-model="value"
  show-action
  label="北京"
  placeholder="请输入小区或地址"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch"><van-icon name="location-o" /></div>
  </template>
</van-search>

<van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
  <van-dropdown-item v-model="value3" :options="option3" />
  <van-dropdown-item v-model="value4" :options="option4" />
</van-dropdown-menu>

      <div class="home-page">
        <div class="home-item" v-for="(item,index) in houseBody" :key="item.houseCode" @click="goInfo(index)">
          <div class="info">
            <div class="left">
              <img
              :src="`http://www.xiaoshuaipeng.com:8080${item.houseImg}`"
              alt=""
            />
            </div>
            <div class="con">
              <p class="title">{{ item.title }}</p>
              <p class="home-info">{{item.desc}}</p>
              <span class="home-other">随时看房</span>
              <div class="home-price">
                <span class="num">{{ item.price }}</span>
                <span class="month">元/月</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import instance from '@/utils/request'
export default {
  name: 'CollectPage',
  data () {
    return {
      houseBody: [],
      value: '',
      value1: 0,
      value2: 'a',
      value3: 'd',
      value4: 'h',
      option1: [
        { text: '区域', value: 0 },
        { text: '北京', value: 1 },
        { text: '上海', value: 2 }
      ],
      option2: [
        { text: '方式', value: 'a' },
        { text: '价格排序', value: 'b' },
        { text: '面积排序', value: 'c' }
      ],
      option3: [
        { text: '租金', value: 'd' },
        { text: '1w~3W', value: 'e' },
        { text: '3w~5w', value: 'f' }
      ],
      option4: [
        { text: '筛选', value: 'h' },
        { text: '3w以下', value: 'i' },
        { text: '5w以下', value: 'j' }
      ]
    }
  },

  async created () {
    const { data } = await instance.get('/houses')
    console.log(data.body.list)
    this.houseBody = data.body.list
  },
  methods: {
    onSearch () {},
    goInfo (index) {
      console.log(this.houseBody[index].houseCode)
      this.$router.push(
         `/detail/${this.houseBody[index].houseCode}`
      )
    }
  }
}
</script>

<style lang="less" scoped>
    .van-icon-location-o{font-size: 30px;
      margin-top: 10px;
     }
.header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  background-color: #21b97a;
  width: 100%;
  height: 50px;
  padding: 0 10px;
}
.condition {
  display: flex;
  margin-top: 50px;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 40px;
  border-bottom: 2px solid #e3e3e3;
}
.home-page {
  margin: 0 10px 0;
  border-bottom: 1px solid #e4e6f0;
}
.home-item {
  margin-bottom: 10px;
  background: #fff;
  padding: 10px 15px;
  .info {
    display: flex;
    align-items: center;
    .left{
      width: 106px;
      height: 80px;
      background: pink;
      img {
      width: 100%;
      height: 100%;
    }
    }

    .con {
      overflow: hidden;
      padding-left: 15px;
      flex: 1;
      .title {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-weight: 700;
      }
      .home-info {
        margin: 5px 0;
        line-height: 1.5;
        font-size: 10px;
        color: #999;
      }
      .home-other {
        color: #39becd;
        background: #e1f5f8;
        font-size: 12px;
        border-radius: 3px;
        padding: 4px 5px;
      }
      .home-price {
        margin-top: 5px;
        font-size: 12px;
        color: #fa5741;
        .num {
          font-size: 16px;
          font-weight: bolder;
        }
      }
    }
  }
}
</style>
